import React from "react";
import { Typography, Carousel, Image, Table, Rate } from "antd";
import styles from "./ProductIntro.module.css";
// 引入antd的Table的ColumnsType类型
import { ColumnsType } from "antd/es/table";


interface PropsType {
    title: string;
    shortDescription: string;
    price: string | number;
    coupons: string;
    points: string;
    discount: string;
    rating: string | number;
    pictures: string[];
}

// Table的RowType类型
interface RowType {
    title: string;
    description: string | number | JSX.Element;
    key: string | number;
}
// Table的ColumnsType类型
const columns: ColumnsType<RowType> = [
    // 第一列
    {
        title: "title",
        dataIndex: "title",
        key: "title",
        align: "left",
        width: 120
    },
    // 第二列
    {
        title: "description",
        dataIndex: "description",
        key: "description",
        align: "center"
    }
]



export const ProductIntro: React.FC<PropsType> = (props) => {
    const {
        title,
        shortDescription,
        price,
        coupons,
        discount,
        rating,
        pictures, } = props;

    // 表格data
    const tableDataSource: Array<RowType> = [
        {
            key: 0,
            title: "路线名称",
            description: title,
        },
        {
            key: 1,
            title: "价格",
            description: (
                <>
                    ¥{" "}
                    <Typography.Text type="danger" strong>
                        {price}
                    </Typography.Text>
                </>
            ),
        },
        {
            key: 2,
            title: "限时抢购折扣",
            description: discount ? (
                <>
                    ¥ <Typography.Text delete>{price}</Typography.Text>{" "}
                    <Typography.Text type="danger" strong>
                        ¥ {discount}
                    </Typography.Text>
                </>
            ) : (
                "暂无折扣"
            ),
        },
        {
            key: 3,
            title: "领取优惠",
            description: coupons ? discount : "无优惠券可领",
        },
        {
            key: 4,
            title: "线路评价",
            description: (
                <>
                    <Rate allowHalf defaultValue={+rating} />
                    <Typography.Text style={{ marginLeft: 10 }}>
                        {rating} 星
                </Typography.Text>
                </>
            ),
        },
    ]

    return (
        <div className={styles["ntro-container"]}>
            <Typography.Title level={4}>
                {title}
            </Typography.Title>
            <Typography.Text>
                {shortDescription}
            </Typography.Text>
            <div className={styles["ntro-detail-content"]}>
                <Typography.Text style={{ marginLeft: 20 }}>
                    ￥<span className={styles["intro-detail-strong-text"]}>{price}</span>{" "}人起
                </Typography.Text>
                <Typography.Text style={{ marginLeft: 50 }}>
                    <span className={styles["intro-detail-strong-text"]}>{rating}</span>{" "}分
                </Typography.Text>
            </div>
            <Carousel autoplay slidesToShow={3} >
                {
                    pictures.map((item: any) => <Image key={item.id} height={150} src={item.url} />)
                }
            </Carousel>
            <Table<RowType> columns={columns} dataSource={tableDataSource} size={"small"} bordered={false} showHeader={false} pagination={false} />
        </div>
    )
}